<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 在vue3里面通过ES6的Proxy对象来实现对vue对象的代理，
        从而劫持了数据更新. 当数据更新以后以后就会通知界面更新界面.
    -->
    <div id="app"></div>
    <button id="randName">修改username</button>
    <script>
        const model={
            username:"老王",
            age:18,
            gender:"女"
        }
        function render(model){//模拟渲染
            document.querySelector("#app").innerText=model.username+model.age+model.gender+model.money;
        }
        // model.username="laoxie";//改数据// render(model); //手动渲染
        //通过创建一个Proxy代理对象 来代理对象model对象的操作.
        //劫持了我们对model数据的操作. 现在改为操作model2
        const model2=new Proxy(model,{
            get(target){//getter函数
                return target;
            },
            set(target,handler,value){//setter函数
                // console.log("target==>",target);console.log("handler=>",handler);console.log("value===>",value);
                target[handler]=value;
                render(target);//当你修改了model2的数据的时候会更新页面
            }
        });
        // model2.username="laoxie";
        document.querySelector("#randName").onclick=function(){
            // model.username="laoxie"+Math.random();
            // model2.username="laoxie"+Math.random();
            // model2.age=Math.random();//修改数据属性的会触发setter函数
            model2.money="一个亿";//给代理对象新增属性也会触发setter函数
        }
    </script>
    <!-- vue3性能更高 -->
    <!-- vue2 实现原理用Object.defineProperty实现. -->
    <div id="app2"></div>
    <button id="randName2">修改数据</button>
    <script>
        const bookModel={
            _name:"《十天精通js》",
            _price:19.99
        }
        function render(bk){
            document.querySelector("#app2").innerText=bk._name+bk._price;
        }
        // render(bookModel);
        // bookModel.name="《十天精通react》"; 
        // render(bookModel);
        //Object.defineProperty(代理对象,代理属性的名称,{对象描述符})
        Object.defineProperty(bookModel,"name",{
            get(){
                return bookModel._name;
            },
            set(value){
                console.log("setter函数被执行")
                bookModel._name=value;
                render(bookModel)
            }
        });
        Object.defineProperty(bookModel,"price",{
            get(){
                return bookModel._price;
            },
            set(value){
                bookModel._price=value;
                render(bookModel);
            }
        })
        bookModel.name="《十天成为亿万富翁》";
        document.querySelector("#randName2").onclick=function(){
            bookModel.price=Math.random();
        }
    </script>
</body>
</html>